<template>
  <div class="Preview" v-if="props.flag" @click="props.close()">
    <swiper
      class="swiper"
      indicator-color="rgba(255,255,255,.5)"
      indicator-active-color="rgba(255,255,255,1)"
      :indicator-dots="true"
      :autoplay="false"
      :duration="500"
      :current="props.index"
    >
      <swiper-item v-for="(i, index) in props.images" :key="index">
        <image :src="props.fileUrl + i" mode="widthFix" class="post-image" />
      </swiper-item>
    </swiper>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  images: {
    type: Array<any>,
    default: [],
  },
  flag: {
    type: Boolean,
    default: false,
  },
  fileUrl: {
    type: String,
    default: '',
  },
  close: {
    type: Function,
    default: () => {},
  },
  index: {
    type: Number,
    default: 0,
  },
})
console.log(props.fileUrl, '预览')
</script>

<style lang="scss" scoped>
.Preview {
  animation: identifier 0.3s ease-in-out;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 1);
  z-index: 999;
  display: flex;
  .swiper {
    margin: auto;
    width: 100%;
    min-height: 50vh;
    .post-image {
      width: 100%;
    }
  }
}
@keyframes identifier {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
</style>
